import React, { PureComponent } from 'react'
import './08-.css'

export default class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      msg: '🐖'
    }
  }
  handleClick = ()=> {
    this.setState({
      msg: '🐂'
    })
  }

  getSnapshotBeforeUpdate(props, state) {
    return 200
  }

  componentDidUpdate(props, state, snapshot){
    document.querySelector('.outerBox').scrollTop = snapshot
  }

  render() {
    return (
      <div>
        <div className="outerBox">
          <div className="innerBox">
            <h1>{this.state.msg}</h1>
            <button onClick={this.handleClick}>更新视图</button>
          </div>
        </div>
      </div>
    )
  }
}
